<template>
    <div class="content">
        <div class="pageTop">
            <div class="flex-bewwten">
                <div class="pageDate">营业日：{{ rangDate[0] }} - {{ rangDate[1] }}</div> 
            </div>
            <div class="pageClose" @click="router.back()">关闭</div>
        </div>
        
        <div class="form">
            <div class="formTop">
                <div class="formTopTitle">营业情况汇总</div>
                <div class="formTopPrint" @click="BusinessSettlePrint()">打印当日营业汇总</div>
            </div>
            <div class="tableBox" v-if="form">
                <div class="tableTitle">
                    <div>营业情况</div>
                    <div></div>
                    <div></div>
                    <div>金额</div>
                </div>
                <div class="tableTotal">
                    <div class="jt-flex-cent">营业额(包含损赔)
                        <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="营业额=优惠合计+虚收+实收"
                        placement="right">
                        <div class="tips-icon"></div>
                        </el-tooltip>
                    </div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.saleTotalAmt }}</div>
                </div>
                <div class="tableSingle">
                    <div></div>
                    <div>商品消费</div>
                    <div></div>
                    <div>￥{{ form.goodsAmt }}</div>
                </div>
                <div class="tableSingle">
                    <div></div>
                    <div>其它费用</div>
                    <div></div>
                    <div>￥{{ form.otherAmt }}</div>
                </div>
                <div class="tableSingle">
                    <div></div>
                    <div></div>
                    <div style="color: #666666;">服务费</div>
                    <div style="color: #666666;">￥<span v-if="form.otherAmts[0]">{{ form.otherAmts[0].serviceAmt }}</span><span v-if="!form.otherAmts[0]">0</span></div>
                </div>
                <div class="tableSingle">
                    <div></div>
                    <div></div>
                    <div style="color: #666666;">补低消</div>
                    <div style="color: #666666;">￥<span v-if="form.otherAmts[0]">{{ form.otherAmts[0].addConsumeAmt }}</span><span v-if="!form.otherAmts[0]">0</span></div>
                </div>
                <div class="tableSingle">
                    <div></div>
                    <div></div>
                    <div style="color: #666666;">不找赎</div>
                    <div style="color: #666666;">￥<span v-if="form.otherAmts[0]">{{ form.otherAmts[0].notGiveChange }}</span><span v-if="!form.otherAmts[0]">0</span></div>
                </div>
                <div class="tableSingle">
                    <div></div>
                    <div>损赔金额</div>
                    <div></div>
                    <div>￥<span>{{ form.damageAmt }}</span></div>
                </div>
                <div class="tableTitle">
                    <div class="jt-flex-cent">优惠合计
                        <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="优惠合计=赠送+折扣优惠+会员优惠+抹零+美团/抖音优惠"
                        placement="right">
                        <div class="tips-icon"></div>
                        </el-tooltip>
                    </div>
                    <div></div>
                    <div></div>
                    <div>金额</div>
                </div>
                <div class="tableTotal">
                    <div>总计</div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.disTotalAmt }}</div>
                </div>
                <div class="tableSingle">
                    <div></div>
                    <div>赠送</div>
                    <div></div>
                    <div>￥{{ form.disTotalAmts[0].giftAmt }}</div>
                </div>
                <div class="tableSingle">
                    <div></div>
                    <div>折扣优惠</div>
                    <div></div>
                    <div>￥{{ form.disTotalAmts[0].disAmt }}</div>
                </div>
                <div class="tableSingle">
                    <div></div>
                    <div>会员优惠</div>
                    <div></div>
                    <div>￥{{ form.disTotalAmts[0].vipAmt }}</div>
                </div>
                <div class="tableSingle">
                    <div></div>
                    <div>抹零</div>
                    <div></div>
                    <div>￥{{ form.disTotalAmts[0].smallChange }}</div>
                </div>
                <div class="tableSingle">
                    <div></div>
                    <div>抖音券优惠</div>
                    <div></div>
                    <div>￥{{ form.disTotalAmts[0].dyDisAmt }}</div>
                </div>
                <div class="tableSingle">
                    <div></div>
                    <div>美团券优惠</div>
                    <div></div>
                    <div>￥{{ form.disTotalAmts[0].mtDisAmt }}</div>
                </div>

                <div class="tableTitle">
                    <div></div>
                    <div>收款方式</div>
                    <div>次数</div>
                    <div>金额</div>
                </div>
                <!-- <div class="tableTotal">
                    <div>挂账金额</div>
                    <div></div>
                    <div>{{ form.mountCount }}</div>
                    <div>￥{{ form.mountTotalAmt }}</div>
                </div> -->
                <div class="tableTotal">
                    <div class="jt-flex-cent">虚收合计
                        <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="虚收合计=会员赠送+其他支付（商家卡等等）+金币+优惠券/兑换券"
                        placement="right">
                        <div class="tips-icon"></div>
                        </el-tooltip>
                    </div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.virtualTotalAmt }}</div>
                </div>
                <div class="tableSingle" v-for="(item,index) in form.virtualTotalAmts" :key="index" v-if="form.virtualTotalAmts.length > 0">
                    <div></div>
                    <div>{{ item.payTypeName }}</div>
                    <div>{{ item.count }}</div>
                    <div>￥{{ item.payAmt }}</div>
                </div>
                <div class="tableTotal">
                    <!-- <div>实收金额（包含损赔）</div> -->
                    <div class="jt-flex-cent">实收金额(包含损赔)
                        <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="实收金额=团购券+银联POS+会员卡+会员本金+支付宝+微信+现金+挂账"
                        placement="right">
                        <div class="tips-icon"></div>
                        </el-tooltip>
                    </div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.activeTotalAmt }}</div>
                </div>
                <div class="tableSingle" v-for="(item,index) in form.activeTotalAmts" :key="index" v-if="form.activeTotalAmts.length > 0">
                    <div></div>
                    <div>{{ item.payTypeName }}</div>
                    <div>{{ item.count }}</div>
                    <div>￥{{ item.payAmt }}</div>
                </div>

                <div class="tableTotal">
                    <div>挂账回收</div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.mountAmtTotal }}</div>
                </div>
                <div class="tableSingle" v-for="(item,index) in form.mountAmtTotals" :key="index" v-if="form.mountAmtTotals.length > 0">
                    <div></div>
                    <div>{{ item.payTypeName }}</div>
                    <div>{{ item.count }}</div>
                    <div>￥{{ item.payAmt }}</div>
                </div>
                <div class="tableTotal">
                    <div>打赏金额</div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.rewardTotalAmt }}</div>
                </div>
                <div class="tableSingle" v-for="(item,index) in form.rewardTotalAmts" :key="index" v-if="form.rewardTotalAmts.length > 0">
                    <div></div>
                    <div>{{ item.payTypeName }}</div>
                    <div>{{ item.count }}</div>
                    <div>￥{{ item.payAmt }}</div>
                </div>
                <div class="tableTotal">
                    <div>点歌金额</div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.songTotalAmt }}</div>
                </div>
                <div class="tableSingle" v-for="(item,index) in form.songTotalAmts" :key="index" v-if="form.songTotalAmts.length > 0">
                    <div></div>
                    <div>{{ item.payTypeName }}</div>
                    <div>{{ item.count }}</div>
                    <div>￥{{ item.payAmt }}</div>
                </div>
                <div class="tableTitle">
                    <div>充值金额</div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.rechargeAmtTotal }}</div>
                </div>
                <div class="tableSingle" v-for="(item,index) in form.rechargeAmtTotals" :key="index" v-if="form.rechargeAmtTotals.length > 0">
                    <div></div>
                    <div>{{ item.chargeWayName }}</div>
                    <div>{{ item.count }}</div>
                    <div>￥{{ item.payAmt }}</div>
                </div>

                <div class="tableTotal">
                    <div>金币赠送合计</div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.rechargeCoinsTotal }}</div>
                </div>
                <div class="tableTotal">
                    <div>赠送金额合计</div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.rechargePreAmtTotal }}</div>
                </div>
                <div class="tableTotal" v-if="configStore.shopInfo && configStore.shopInfo.brandCode == '0007'">
                    <div >合作股东合计</div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.upComAmtTotal }}</div>
                </div>
                <div class="tableTotal" v-else>
                    <div>会员权益合计</div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.upAmtTotal }}</div>
                </div>
                <!-- <div class="tableSingle" v-for="(item,index) in form.activeTotalAmts" :key="index" v-if="form.activeTotalAmts.length > 0">
                    <div></div>
                    <div>{{ item.payTypeName }}</div>
                    <div>{{ item.count }}</div>
                    <div>￥{{ item.payAmt }}</div>
                </div> -->
                <div class="tableTotal">
                    <div>积分商城</div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="tableSingle" v-for="(item,index) in form.memberMallStatistic" :key="index" v-if="form.memberMallStatistic.length > 0">
                    <div></div>
                    <div>{{ item.payTypeName }}</div>
                    <div>{{ item.count }}</div>
                    <div>￥{{ item.payAmt }}</div>
                </div>

                <div class="tableTitle">
                    <div>出品点合计(不含损赔)</div>
                    <div></div>
                    <div>数量</div>
                    <div>￥{{ form.pointAmtTotalAmt }}</div>
                </div>
                <div class="tableSingle" v-for="(item,index) in form.pointAmtTotalAmts" :key="index" v-if="form.pointAmtTotalAmts.length > 0">
                    <div>{{ item.producePoint }}</div>
                    <div>{{ item.producePointName }}</div>
                    <div>{{ item.totalQty }}</div>
                    <div>￥{{ item.totalAmt }}</div>
                </div>
                <div class="tableTitle">
                    <!-- <div>实际收款</div> -->
                    <div class="jt-flex-cent">实际收款
                        <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="实际收款=会员充值+团购券实收+银联pos+微信+支付宝+现金+挂账回收+（会员权益/合作股东+积分商城微信）"
                        placement="right">
                        <div class="tips-icon"></div>
                        </el-tooltip>
                    </div>
                    <div></div>
                    <div></div>
                    <div>￥{{ form.activeTotalAmtEnd }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup> 
    import Api from '@/api'
    import { getLocalIPv4 } from "@/utils/getip.js"; 
    import dayjs from "dayjs"
    
    import { transformWorkTime } from '@/utils/chenhao.js' 
    import useConfigStore from '@/store/config'  
    const configStore = useConfigStore()
    const orgStartTime = configStore.shopInfo.orgReportStartTime //orgStartTime
    const orgEndTime = configStore.shopInfo.orgReportEndTime  //orgEndTime 
    console.log(configStore.shopInfo,'configStore.shopInfo')

    const router = useRouter()
    const route = useRoute()
    const form = ref('')
    const newDate = new Date()
    const rangDate = transformWorkTime('今天', orgStartTime, orgEndTime)

    //获取当前时间
    const hours = String(newDate.getHours()).padStart(2, '0');
    const minutes = String(newDate.getMinutes()).padStart(2, '0');
    const seconds = String(newDate.getSeconds()).padStart(2, '0');
    const formattedTime = ref(`${hours}:${minutes}:${seconds}`)

    if(route.query.startTime) {
        rangDate[0] = dayjs(route.query.startTime).format('YYYY-MM-DD HH:mm:ss')
        rangDate[1] = dayjs(route.query.endTime).format('YYYY-MM-DD HH:mm:ss')
    }
    //获取ip地址
    const ip = ref("");
    getLocalIPv4()
    .then((ipAddress) => {
        // 在这里处理获取到的 IP 地址
        ip.value = ipAddress;
        console.log("IP 地址:", ip.value);
    })
    .catch((error) => {
        console.error("发生错误:", error);
        // 在这里处理错误情况
    });
    const BusinessSettlePrint = () => {
        Api.Common.PcObjProcess.Do({functionName:"BusinessSettlePrint",contentData:{"ip":ip.value}})
        .then(res=>{
            console.log(res)
            ElNotification({title: '提示',message: "打印成功", type: 'success'});
        })
    } 
    const OpShiftHandoverBus = () => {
        Api.Common.PcObjProcess.Do({functionName:"OpShiftHandoverBus",contentData:{startTime: rangDate[0],endTime: rangDate[1]}}).then(res=>{
            form.value = res
        })
    }
    OpShiftHandoverBus()
</script>
  
<style scoped lang="scss">
  .content{
    width: 880px;
    // background-color: #fff;
    margin: auto;
    .pageTop{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .flex-bewwten {
            display: flex;
        }
        .pageDate{
            font-size: 20px;
            font-weight: bold;
        }
        .pageClose{
            background-color: #CCCCCC;
            font-size: 18px;
            padding: 12px 32px;
            border-radius: 8px;
            cursor: pointer;
        }
    }
    .form{
        background-color: #fff;
        box-sizing: border-box;
        padding: 15px 30px;
        margin: 10px 0;
        border-radius: 6px;
        .formTop{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 15px;
            .formTopTitle{
                font-size: 20px;
                font-weight: bold;
            }
            .formTopPrint{
                background-color: #FFE566;
                font-size: 18px;
                padding: 10px 30px;
                border-radius: 8px;
                cursor: pointer;
            }
        }
        .tableBox{
            border: 1px solid #FF6A00;
            border-radius: 8px;
            overflow: hidden;
            .tableTitle{
                display: flex;
                align-items: center;
                div{
                    color: #212121;
                    font-size: 20px;
                    font-weight: bold;
                    background-color: #E6E6E6;
                    width: 25%;
                    height: 60px;
                    line-height: 60px;
                    text-align: center;
                    border-bottom: 1px solid #CCCCCC;
                    border-right: 1px solid #CCCCCC;
                }
                div:last-child{
                    border-right: none;
                }
            }
            .tableTotal{
                display: flex;
                align-items: center;
                div{
                    color: #212121;
                    font-size: 18px;
                    font-weight: bold;
                    width: 25%;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    border-bottom: 1px solid #CCCCCC;
                    border-right: 1px solid #CCCCCC;
                }
                div:last-child{
                    border-right: none;
                    color: #FF3333;
                }
            }
            .tableSingle{
                display: flex;
                align-items: center;
                div{
                    color: #212121;
                    font-size: 16px;
                    width: 25%;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    border-bottom: 1px solid #CCCCCC;
                    border-right: 1px solid #CCCCCC;
                }
                div:last-child{
                    font-weight: bold;
                    border-right: none;
                }
            }
            >div:last-child{
                div{
                    border-bottom: none;
                }
            }
        }
    }
  }

   .tips-icon {
    margin-left: 6px;
    cursor: pointer;
    width:20px !important;
    height:20px !important;
    border-bottom: none !important;
    background-image: url('https://oss.jtmckj.com/mb/public/privacy/tips-icon.png');
    background-size: 100% 100%;
  }
  
  .jt-flex-cent {
    display: flex;align-items: center;justify-content: center;
  }

</style>